<template>


  <div class="user-container">

    <div class="user-header">
      <!-- 欢迎信息 -->
      <div class="welcome-section">
        <h1>{{ greeting }}</h1>
        <div class="current-time">
          <span class="time">{{ currentTime }}</span>
        </div>
      </div>

      <div class="textWord">
        <h1>
          {{ greetingText }}
        </h1>
      </div>

      <!-- 用户信息区域 -->
      <div class="user-info">
        <!-- 头像组件 -->
        <div class="avatar-container">
          <el-popover
            placement="bottom"
            width="300"
            trigger="click"
            :popper-class="'user-info-popover'"
          >
            <!-- 弹出框内容 -->
            <div class="user-detail-info">
              <div class="user-detail-header">
                <el-avatar shape="square" :size="60" :src="avatar"/>
                <div class="user-basic-info">
                  <div class="user-name-popover">{{ userName }}</div>
                  <div class="user-id">ID: {{ id }}</div>
                </div>
              </div>

              <div class="user-detail-content">
                <div class="info-item">
                  <span class="label">手机号:</span>
                  <span class="value">{{ phone }}</span>
                </div>
                <div class="info-item">
                  <span class="label">余额:</span>
                  <span class="value balance">¥{{ balance / 100 }}元</span>
                </div>
              </div>

              <!-- 添加余额充值按钮 -->
              <div class="user-detail-footer">
                <el-button type="primary" size="small" style="width: 100%;" @click="handleRecharge">余额充值</el-button>
              </div>

            </div>
            <!-- 触发元素 -->
            <el-avatar
              slot="reference"
              shape="square"
              :size="55"
              :src="avatar"
              class="clickable-avatar"
            />
          </el-popover>
        </div>

        <!-- 用户名和退出登录 -->
        <div class="user-actions">
          <span class="user-name">{{ userName }}</span>

          <el-button
            type="danger"
            size="small"
            @click="logout"
            class="logout-btn"
          >
            退出登录
          </el-button>
        </div>
      </div>
    </div>

    <!-- 简单的过渡区域 -->
    <div class="transition-divider"></div>

    <div class="formStyle">
      <!--    搜索框-->
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

        <!--      场地类型  下拉框  -->
        <el-form-item label="场地类型" prop="type">
          <!--        下拉框-->
          <el-select v-model="queryParams.type" placeholder="请选择场地类型" clearable size="small">
            <el-option label="篮球场" value="0"></el-option>
            <el-option label="羽毛球场" value="1"></el-option>
            <el-option label="乒乓球场" value="2"></el-option>
            <el-option label="游泳场" value="3"></el-option>
          </el-select>
        </el-form-item>
        <!--      订单状态 下拉框-->
        <el-form-item label="预约状态" prop="status">
          <!--     0未使用 1使用中 2已完成 3已取消   -->
          <el-select v-model="queryParams.status" placeholder="请选择预约状态" clearable size="small">
            <el-option label="未使用" value="0"></el-option>
            <el-option label="使用中" value="1"></el-option>
            <el-option label="已完成" value="2"></el-option>
            <el-option label="已取消" value="3"></el-option>
          </el-select>
        </el-form-item>
        <!--        订单创建时间-->
        <el-form-item label="创建时间">
          <!--          选择单个日期-->
          <el-date-picker
            v-model="queryParams.createTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            clearable
            size="small"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>

      </el-form>

      <!--      表格-->
      <el-table v-loading="loading" :data="reservationList" @selection-change="handleSelectionChange"
                style="width: 100%">

        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="序号" align="center" type="index" width="50"/>

        <el-table-column label="场地编号" align="center" prop="courtId" width="105">
          <template v-slot="scope">
            <el-tag v-for="item in placeList" v-if="item.id === scope.row.courtId">{{ item.number }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="场地类型" align="center" prop="courtType" width="100">
          <template v-slot="scope">
            <el-tag v-for="item in placeList" v-if="item.id === scope.row.courtId">{{ getPlaceType(item.type) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="开始时间" align="center" prop="startTime" width="150">
          <template v-slot="scope">
            <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>

        <el-table-column label="预约时长" align="center" prop="duration" width="100">
          <template v-slot="scope">
            <el-tag> {{ scope.row.duration }}分钟</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="使用人数" align="center" prop="peopleCount" width="100">
          <template v-slot="scope">
            <el-tag> {{ scope.row.peopleCount }} 人</el-tag>
          </template>
        </el-table-column>
        <!--        预约状态-->
        <el-table-column label="预约状态" align="center" prop="status" width="100">
          <template v-slot="scope">
            <el-tag v-if="scope.row.status === 0">未使用</el-tag>
            <el-tag v-if="scope.row.status === 1" type="success">使用中</el-tag>
            <el-tag v-if="scope.row.status === 2" type="info">已完成</el-tag>
            <el-tag v-if="scope.row.status === 3" type="warning">已取消</el-tag>
          </template>
        </el-table-column>
        <!--        实际金额-->
        <el-table-column label="实际金额" align="center" prop="actualFee" width="100">
          <template v-slot="scope">
            <el-tag> ¥{{ scope.row.actualFee / 100 }}</el-tag>
          </template>
        </el-table-column>

        <!--        预约创建时间-->
        <el-table-column label="预约创建时间" align="center" prop="createTime" width="150">
          <template v-slot="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>

        <!--备注-->
        <el-table-column label="备注" align="center" prop="notes" width="180"/>

        <!--        操作  对于未使用的订单 可以取消预约和修改预约 -->
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
<!--            预约核销按钮 表示开始使用 预约状态改为使用中-->
            <el-button
              size="mini"
              type="text"
              icon="el-icon-success"
              @click="handleVerify(scope.row)"
            >预约核销
            </el-button>

            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
            >修改预约
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >取消预约
            </el-button>
          </template>
        </el-table-column>

      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 添加或修改预约管理对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" label-width="80px">

          <!--          会员姓名只读-->
          <el-form-item label="会员姓名" prop="userName">
            <el-input v-model="this.userName" disabled/>
          </el-form-item>
          <el-form-item label="场地编号" prop="courtId">
            <el-input
              :value="getPlaceNumberById(form.courtId)"
              disabled
            />
          </el-form-item>


          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker clearable
                            v-model="form.startTime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            disabled></el-date-picker>
          </el-form-item>

          <el-form-item label="使用人数" prop="peopleCount">
            <el-input v-model="form.peopleCount" placeholder="请输入使用人数"/>
          </el-form-item>
          <el-form-item label="备注" prop="notes">
            <el-input v-model="form.notes" placeholder="请输入备注"/>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>


      <!--      余额充值对话框-->
      <!-- 余额充值对话框 -->
      <el-dialog title="余额充值" :visible.sync="rechargeOpen" width="400px" append-to-body>
        <el-form ref="rechargeForm" :model="rechargeForm" :rules="rechargeRules" label-width="80px">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="rechargeForm.phone" placeholder="请输入手机号"/>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="rechargeForm.password" placeholder="请输入密码"/>
          </el-form-item>
          <el-form-item label="充值金额" prop="amount">
            <el-input-number
              v-model="rechargeForm.amount"
              placeholder="请输入充值金额"
              :min="0.01"
              :precision="2"
              :step="100"
              style="width: 100%"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelRecharge">取 消</el-button>
          <el-button type="primary" @click="submitRecharge">确 定</el-button>
        </div>
      </el-dialog>


    </div>
  </div>

</template>

<script>

import {getUser, getCurrentUseReservations, cancelReservation, recharge , verifyReservation , userLogout} from "@/api/manager/user"
import {listPlace} from "@/api/manager/place";
import {parseTime} from "@/utils/ruoyi";
import {addReservation, getReservation, updateReservation} from "@/api/manager/reservation";
import router from "@/router";


export default {
  name: 'UserHeader',
  data() {
    return {

      // 遮罩层
      loading: true,
      // 会员信息列表
      reservationList: [],
      total: 0,
      currentTime: '',
      id: '',
      ids: '',
      userName: '',
      birthday: '',
      gender: '',
      phone: '',
      balance: '',
      avatar: '',
      greeting: '尊敬的会员，早上好',
      greetingText: '不负时光，不负韶华',

      showSearch: true, // 是否显示查询条件

      title: "修改预约",
      open: false,

      //查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: this.id,
        type: null,
        createTime: null,  //预约创建时间
        status: null  //预约当前状态
      },
      commonQueryParams: {
        pageNum: 1,
        pageSize: 10000
      },
      // 表单参数
      form: {},

      rechargeForm: {
        phone: null,
        password: null,
        amount: 100
      },

      rechargeOpen: false,
      rechargeRules: {
        phone: [
          {required: true, message: "手机号不能为空", trigger: "blur"},
          {pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号", trigger: "blur"}
        ],
        password: [
          {required: true, message: "密码不能为空", trigger: "blur"}
        ],
        amount: [
          {required: true, message: "充值金额不能为空", trigger: "blur"},
          {type: "number", message: "充值金额必须为数字值", trigger: "blur"},
          {validator: this.validateAmount, trigger: "blur"}
        ]
      },


      placeList: []  // 场地列表


    }
  },
  mounted() {
    //挂载的时候自动调用会员查询，返回该id会员的所有信息
    this.getCurrentUser()
    this.updateTime()
    this.updateGreeting()
    this.getPlaceList()

    // 每秒钟更新一次时间
    this.timeInterval = setInterval(this.updateTime, 1000)
    this.greetInterval = setInterval(this.updateGreeting, 60000)
  },
  beforeDestroy() {
    if (this.timeInterval) {
      clearInterval(this.timeInterval)
    }
    if (this.greetInterval) {
      clearInterval(this.greetInterval)
    }

  },

  methods: {
    parseTime,
    updateTime() {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const day = String(now.getDate()).padStart(2, '0')
      const hours = String(now.getHours()).padStart(2, '0')
      const minutes = String(now.getMinutes()).padStart(2, '0')
      const seconds = String(now.getSeconds()).padStart(2, '0')

      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`

    },

    // 更新问候语
    updateGreeting() {
      const hour = new Date().getHours();

      if (hour >= 5 && hour < 9) {
        this.greeting = '尊敬的会员，早上好';
        //随机数
        const randomNumber = Math.floor(Math.random() * 10);
        if (randomNumber === 0) {
          this.greetingText = '早上好，要来一杯咖啡吗';
        } else if (randomNumber === 1) {
          this.greetingText = '早上好！祝你开心，不止一天';
        } else if (randomNumber === 2) {
          this.greetingText = '早上好，愿一切美好与你环环相扣';
        } else if (randomNumber === 3) {
          this.greetingText = '早上好！阳光正好，微风不燥，不辜负美好时光！';
        } else if (randomNumber === 4) {
          this.greetingText = '愿生活不太拥挤，愿微笑不必刻意';
        } else {
          this.greetingText = '不负时光，不负韶华';
        }
      } else if (hour >= 9 && hour < 11) {
        this.greeting = '尊敬的会员，上午好';
        //随机数
        const randomNumber = Math.floor(Math.random() * 10);
        if (randomNumber === 0) {
          this.greetingText = '人间不值得你难过，要活得洒脱一些。上午好，各位';
        } else if (randomNumber === 1) {
          this.greetingText = '愿你成为自己喜欢的样子，不抱怨，不将就，有野心，有光芒！';
        } else if (randomNumber === 2) {
          this.greetingText = '保持对生活的爱和热情，把每一天活的热气腾腾!';
        } else if (randomNumber === 3) {
          this.greetingText = '明天的希望，就在今天打基础，只有行动起来，才会有结果，只有付出才会有回报。';
        } else if (randomNumber === 4) {
          this.greetingText = '年年月月热爱可抵岁月漫长';
        } else {
          this.greetingText = '不负时光，不负韶华';
        }
      } else if (hour >= 11 && hour < 13) {
        this.greeting = '尊敬的会员，中午好';
        this.greetingText = '中午好，记得午休';
      } else if (hour >= 13 && hour < 17) {
        this.greeting = '尊敬的会员，下午好';
        this.greetingText = '努力工作，要来一杯咖啡吗';
      } else if (hour >= 17 && hour < 23) {
        this.greeting = '尊敬的会员，晚上好';
        this.greetingText = '晚上好，辛苦了';
      } else {
        this.greeting = '尊敬的会员，已经深夜了';
        this.greetingText = '夜深了，早点休息';
      }
    },
    // 获取当前用户信息
    getCurrentUser() {
      getUser().then(response => {
        console.log(response)
        this.id = response.id
        this.userName = response.name
        this.birthday = response.birthday
        this.gender = response.gender
        this.phone = response.phone
        this.balance = response.balance
        this.avatar = response.avatar

        this.handleQuery()
      })
    },

    // 根据场地ID获取场地编号
    getPlaceNumberById(courtId) {
      if (!courtId) return '';
      const place = this.placeList.find(item => item.id === courtId);
      return place ? place.number : '';
    },

    getList() {
      this.loading = true
      this.queryParams.params = {}
      if (null != this.daterangeStartTime && '' != this.daterangeStartTime) {
        this.queryParams.params["beginStartTime"] = this.daterangeStartTime[0]
        this.queryParams.params["endStartTime"] = this.daterangeStartTime[1]
      }
      getCurrentUseReservations(this.queryParams).then(response => {
        this.reservationList = response.data.record
        this.total = response.data.total
        this.loading = false
      })
    },

    logout() {
      // 退出登录逻辑
      this.$confirm('确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 执行退出登录操作
        //向后端发送一个请求
        userLogout(this.id).then(() => {
          // 清除token等
          localStorage.removeItem("token");
          localStorage.removeItem("member");

          this.$message({
            type: 'success',
            message: '退出成功!'
          })
          // 跳转到登录页
          this.$router.push('/manager/userLogin')
        }).catch(()=>{
          this.$message.error("退出失败,请稍后重试")
        })
      }).catch(() => {
        // 取消退出
      })
    },

    /*获取场地列表*/
    getPlaceList() {
      this.loading = true
      listPlace(this.commonQueryParams).then(response => {
        this.placeList = response.rows
        this.loading = false
      })
    },

    getPlaceType(type) {
      const typeMap = {
        '0': '篮球场',
        '1': '羽毛球场',
        '2': '乒乓球场',
        '3': '游泳场'
      };
      return typeMap[type] || '未知场地';
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.queryParams.userId = this.id
      getCurrentUseReservations(this.queryParams).then(response => {
        console.log("------------------------")
        this.reservationList = response.data.record
        console.log(this.reservationList)
        this.total = response.data.total
        this.loading = false
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeStartTime = []
      this.resetForm("queryForm")
      this.handleQuery()
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        memberId: null,
        courtId: null,
        startTime: null,
        duration: null,
        peopleCount: null,
        status: null,
        actualFee: null,
        createTime: null,
        notes: null
      }
    },
    /** 取消按钮操作 */
    cancel() {
      this.open = false
      this.reset()
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateReservation(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
            })
          } else {
            addReservation(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            })
          }
        }
      })
    },

    /** 修改预约按钮操作 */
    handleUpdate(row) {
      //如果订单状态是 1 使用中 2 已完成 3 已取消 状态 则不允许修改 提示 预约不可修改
      if (row.status === 1 || row.status === 2 || row.status === 3) {
        this.$message.error('当前订单状态不允许修改！');
      } else {
        //回显数据
        // 只允许修改预约的 人数和备注
        this.reset()
        const id = row.id || this.ids
        getReservation(id).then(response => {
          this.form = response.data
          this.open = true
          this.title = "修改预约"
        })
      }
    },

    /** 取消预约按钮操作 */
    handleDelete(row) {
      //如果订单状态是 2 已完成 3 已取消 状态 则不允许修改 提示 不可取消
      if (row.status === 1 || row.status === 2 || row.status === 3) {
        this.$message.error('当前预约不可取消！');
      } else {
        //弹窗 是否取消预约
        this.$confirm('确定要取消预约吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: "warning"
        }).then(() => {
          console.log(row.id)
          // 用户点击确定，发送取消预约请求
          cancelReservation(row.id).then(response => {
            this.$message.success('预约取消成功');
            this.getList(); // 重新加载数据
          }).catch(error => {
            this.$message.error('取消预约失败,请联系管理员');
          });
        }).catch(() => {
          // 用户点击取消或关闭弹窗
          this.$message.info('已取消操作');
        })
      }
    },

    /*充值按钮操作*/
    handleRecharge() {
      this.rechargeOpen = true;
      this.rechargeForm.phone = this.phone; // 默认填入当前用户手机号
    },

    // 取消充值
    cancelRecharge() {
      this.rechargeOpen = false;
      //延迟0.5秒
      setTimeout(() => {
        this.resetRechargeForm();
      }, 800)
    },

    // 重置充值表单
    resetRechargeForm() {
      this.rechargeForm = {
        phone: '',
        password: '',
        amount: 100.00
      };
      this.$refs["rechargeForm"] && this.$refs["rechargeForm"].resetFields();
    },

    // 验证充值金额
    validateAmount(rule, value, callback) {
      if (!value) {
        callback(new Error('充值金额不能为空'));
      } else if (value <= 0) {
        callback(new Error('充值金额必须大于0'));
      } else {
        callback();
      }
    },

    // 提交充值
    submitRecharge() {
      this.$refs["rechargeForm"].validate(valid => {
        if (valid) {
          this.rechargeForm.amount *= 100;
          recharge(this.rechargeForm).then(response => {
            this.$message.success("充值成功");
            this.rechargeOpen = false;

            this.resetRechargeForm();
            this.getCurrentUser(); // 重新获取用户信息更新余额
          }).catch(error => {
            this.$message.error("充值失败");
            this.resetRechargeForm();
          });
        }
      });
    },

    // 预约核销
    handleVerify(row){
      //如果订单状态是 2 已完成 3 已取消 状态 则不允许修改 提示 不可取消
      if (row.status === 1 || row.status === 2 || row.status === 3) {
        this.$message.error('该预约已核销');
      } else {
        //弹窗 是否取消预约
        this.$confirm('确定要核销预约吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: "warning"
        }).then(() => {
          console.log(row.id)
          // 用户点击确定，发送取消预约请求
          verifyReservation(row.id).then(response => {
            this.$message.success('预约核销成功，快去运动吧');
            this.getList(); // 重新加载数据
          }).catch(error => {
            this.$message.error('预约核销失败,请联系管理员');
          });
        }).catch(() => {
          // 用户点击取消或关闭弹窗
          this.$message.info('已取消操作');
        })
      }
    }

  }
}
</script>

<style scoped lang="scss">

.user-container {
  width: 100%;
}


.user-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.05);
}

.welcome-section {
  h1 {
    margin: 0;
    font-size: 22px;
    color: #333;
    font-weight: 500;
    letter-spacing: 0.5px;
  }

  .current-time {
    margin-top: 8px;

    .time {
      font-size: 14px;
      color: #666;
      font-weight: 400;
      font-family: 'Helvetica Neue', Arial, sans-serif;
    }
  }
}

.formStyle {
  /*左侧间距大一点*/
  margin-left: 10px;
}

.textWord {
  h1 {
    font-size: 18px;
    color: #888;
    font-weight: 400;
    margin: 0;
    letter-spacing: 1px;
  }
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* 简单的过渡区域样式 */
.transition-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #e0e0e0, transparent);
  margin: 7px 0;
}

.avatar-container {
  position: relative;

  .clickable-avatar {
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      transform: scale(1.05);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
  }
}

.user-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  .user-name {
    font-size: 16px;
    color: #606266;
    margin-bottom: 8px;
  }

  .logout-btn {
    padding: 6px 12px;
    border-radius: 4px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .user-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .user-info {
    align-self: flex-end;
  }
}
</style>

<!-- 全局样式，用于 popover -->
<style lang="scss">
.user-info-popover {
  padding: 0 !important;
  border-radius: 8px !important;
  border: 1px solid #ebeef5 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;

  .user-detail-info {
    padding: 20px;

    .user-detail-header {
      display: flex;
      align-items: center;
      padding-bottom: 15px;
      border-bottom: 1px solid #f0f0f0;

      .user-basic-info {
        margin-left: 15px;

        .user-name-popover {
          font-size: 18px;
          font-weight: 500;
          color: #333;
          margin-bottom: 4px;
        }

        .user-id {
          font-size: 14px;
          color: #999;
        }
      }
    }

    .user-detail-content {
      padding-top: 15px;

      .info-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;

        &:last-child {
          margin-bottom: 0;
        }

        .label {
          font-size: 14px;
          color: #666;
        }

        .value {
          font-size: 14px;
          color: #333;
          font-weight: 500;

          &.balance {
            color: #f56c6c;
            font-weight: 600;
          }
        }
      }
    }

    .user-detail-footer {
      padding-top: 15px;
      border-top: 1px solid #f0f0f0;
      margin-top: 15px;
    }

  }
}
</style>

